---

const { event } = Astro.props;
---


<!-- 侧边 -->
<layout-main-bottom-right data-event={event}>
<aside class="grow-0 shrink-0 xl:w-96">
    <div
      id="right-box-fixed"
      class="right-with max-xl:left-0 max-xl:overflow-auto max-xl:hidden max-xl:w-screen max-xl:h-screen max-xl:fixed max-xl:top-16 max-xl:z-50 h-fit xl:w-96"
    >
      <slot />
    </div>
</aside>
</layout-main-bottom-right>
<style>
    .right-box-fixed {
      position: fixed;
      bottom: 60px;
    }
  
    @media not all and (min-width: 1280px) {
      .right-with {
        min-width: 100vw;
      }
    }
  </style>
  
  <script>
    class LayoutMainBottomRight extends HTMLElement {
      constructor() {
        super();
        // 从 data（数据）属性中读取消息。
        const eventString = this.dataset.event;
      //   将字符串转换为函数。
        var evet;
        if (eventString) {
          evet = new Function("return " + eventString);
        }
        const y = document.getElementById("right-box-fixed");
        const browserWidth =
          window.innerWidth ||
          document.documentElement.clientWidth ||
          document.body.clientWidth;
        if (y) {
          const yLeft = y.offsetLeft;
          y.style.left = yLeft + "px";
          window.addEventListener("scroll", function () {
            var scrollTop =
              window.pageYOffset ||
              document.documentElement.scrollTop ||
              document.body.scrollTop; 
            if (browserWidth > 1280) {
              if (
                scrollTop > y.offsetTop + y.offsetHeight &&
                !y.classList.contains("right-box-fixed")
              ) {
                y.classList.add("right-box-fixed");
              } else if (y.offsetHeight > scrollTop) {
                y.classList.remove("right-box-fixed");
              }
            } else {
            }
            evet()(scrollTop);
          });
        }
      }
    }
    customElements.define("layout-main-bottom-right", LayoutMainBottomRight);
  </script>